<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作简易聊天框</title>
</head>
<body>
<form action="" name="myform">
    <div>
        <textarea name="chatBox" id="chatBox" cols="37" rows="10"></textarea>
    </div>
    <div>
        <span id="author">客服：</span>
        <input type="text" name="text" id="text">
        <button type="button" onclick="f()" id="send">发送</button>
    </div>
</form>

<script>
    function f() {
        // 获取用户输入的内容
        const text = document.myform.text.value;
        if (text === "") {
            alert("请输入内容。")
            return
        }

        // 获取作者信息
        const author = document.getElementById("author").textContent;

        // 获取聊天框内原有的内容
        let chatBox = document.getElementById("chatBox").value;

        // 拼接新的聊天框内容
        var time = new Date().toLocaleString();
        let newText = author + text;
        console.log(newText + "   " + time)


        // 将新的聊天框内容赋值到聊天框中
        document.getElementById("chatBox").value = chatBox + "\n" + newText;

        // 重置输入框
        document.myform.text.value = ""
    }

</script>

</body>
</html>
